<template>
  <section class="section_fall clearfix">
    <div class="fall_w" ref="fall_w">
      <div class="main" v-show="flag">
        <div class="box" v-for="goods in goodsList" :key="goods.goodsId">
          <div class="pic">
            <img :src="goods.goodsImg" alt="" />
            <p>{{ goods.goodsName }}</p>
            <span>起拍价:{{ goods.goodsPrice }}￥</span>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: "Fall",
  data() {
    return {
      goodsList: [],
      flag: 1,
      timer:null
    };
  },
  props: ["list"],
  mounted() {},
  beforeDestroy() {
    // window.removeEventListener("scroll",this.showFall)
  },
  methods: {
    // showFall() {
    //   this.waterFull();
    //   // 2. 动态加载图片
    //   // var timer = null;
    //   window.addEventListener("scroll", () => {
    //     // console.log("b",this.checkWillLoadImage())
    //     // console.log("time",this.timer)
    //     // clearTimeout(timer);
    //     this.timer = setTimeout(() => {
    //       if (this.checkWillLoadImage()) {
    //         // 2.1 造数据
    //         let dataArr = this.goodsList.slice(20);
    //         for (let i = 0; i < 6; i++) {
    //           let data = dataArr[Math.floor(Math.random() * dataArr.length)];
    //           // console.log(data)

    //           // 2.2 遍历数据, 创建元素
    //           let main = this.$refs.main;

    //           let newBox = document.createElement("div");
    //           newBox.className = "box";
    //           newBox.style.paddingLeft = 15 + "px";
    //           newBox.style.paddingTop = 15 + "px";
    //           main.appendChild(newBox);
    //           let newPic = document.createElement("div");
    //           newPic.className = "pic";
    //           newPic.style.backgroundColor = "#fff";
    //           newPic.style.width = 187 + "px";
    //           newPic.style.padding = 10 + "px";
    //           newPic.style.borderRadius = 5 + "px";
    //           newBox.appendChild(newPic);
    //           let newImg = document.createElement("img");
    //           newImg.src = `${data.imgUrl}`;
    //           newImg.style.width = 165 + "px";
    //           newPic.appendChild(newImg);
    //           let newP = document.createElement("p");
    //           newP.innerText = data.trade;
    //           newP.style.textAlign = "center";
    //           newPic.appendChild(newP);
    //           let newSpan = document.createElement("span");
    //           newSpan.innerText = "当前价：" + data.price + "￥";
    //           newSpan.style.display = "block";
    //           newSpan.style.textAlign = "center";
    //           newPic.appendChild(newSpan);

    //           // 2.3 重新布局
    //           this.waterFull();
    //         }
    //       }else{
    //         clearTimeout(this.timer)
    //       }
    //     }, 100);
    //   });
    // },
    // waterFull() {
    //   // 1. 父盒子居中
    //   // 1.1 获取所有的盒子
    //   let main = this.$refs.mainshow;
    //   let allBox = main.getElementsByClassName("box");
    //   // 1.2 获取子盒子的宽度
    //   let boxWidth = allBox[0].offsetWidth;
    //   // 1.3 获取大盒子的宽度
    //   let mainW = main.offsetWidth;
    //   // 1.4 求出列数
    //   let cols = parseInt(mainW / boxWidth);
    //   // 2. 子盒子的定位
    //   // 2.1 定义高度数组
    //   let heightArr = [],
    //     boxHeight = 0,
    //     minBoxHeight = 0,
    //     minBoxIndex = 0;
    //   // 2.2 遍历子盒子
    //   for (let i = 0; i < allBox.length; i++) {
    //     // 2.2.1 求出每一个子盒子的高度
    //     boxHeight = allBox[i].offsetHeight;
    //     // 2.2.2 取出第一行盒子的高度放入高度数组
    //     if (i < cols) {
    //       // 第一行
    //       heightArr.push(boxHeight);
    //       allBox[i].style = "";
    //     } else {
    //       // 剩余行
    //       // 1. 取出最矮的盒子高度
    //       minBoxHeight = Math.min(...heightArr);
    //       // 2. 求出最矮盒子对应的索引
    //       minBoxIndex = this.getMinBoxIndex(heightArr, minBoxHeight);
    //       // 3. 剩余盒子定位
    //       allBox[i].style.position = "absolute";
    //       allBox[i].style.left = minBoxIndex * boxWidth + "px";
    //       allBox[i].style.top = minBoxHeight + "px";
    //       // 4. 更新数组中的高度
    //       heightArr[minBoxIndex] += boxHeight;
    //     }
    //   }
    // },
    // getMinBoxIndex(arr, val) {
    //   for (let i = 0; i < arr.length; i++) {
    //     if (arr[i] === val) {
    //       return i;
    //     }
    //   }
    // },
    // checkWillLoadImage() {
    //   // 1. 获取最后一个盒子
    //   let main = this.$refs.mainshow;
    //   let allBox = main.getElementsByClassName("box");
    //   let lastBox = allBox[allBox.length - 1];

    //   // 2. 求出最后一个盒子自身高度的一半 + offsetTop
    //   let lastBoxDis = lastBox.offsetHeight * 0.5 + lastBox.offsetTop;

    //   // 3. 页面可视区域的高度
    //   let mainHight = main.offsetHeight;

    //   return lastBoxDis <= 3000;
    // },
    // scroll() {
    //   if (window.pageYOffset !== null) {
    //     return {
    //       top: window.pageYOffset,
    //       left: window.pageXOffset,
    //     };
    //   } else if (document.compatMode === "CSS1Compat") {
    //     // W3C
    //     return {
    //       top: document.documentElement.scrollTop,
    //       left: document.documentElement.scrollLeft,
    //     };
    //   }

    //   return {
    //     top: document.body.scrollTop,
    //     left: document.body.scrollLeft,
    //   };
    // },
    // getData(){
    //   console.log("d",this.goodsList)
    // }
  },
  watch: {
    // 获取父组件传过来的值,及时渲染
    list:{
      handler(newData){
        this.goodsList= newData;
      },
      deep: true,
    }
    
    // function (newData, oldData) {
    //   this.goodsList = newData;
    //   // this.getData()
    // },
  },
};
</script>

<style scoped>
.section_fall {
  width: 1920px;
  height: 1500px;
  /* height: auto; */
}
.fall_w {
  width: 1250px;
  height: 100%;
  margin: 0 auto;
}
button {
  width: 200px;
  height: 50px;
  font-family: "楷体";
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  background-color: red;
  border-radius: 5px 5px;
  cursor: pointer;
}
button:hover {
  opacity: 0.8;
}
.section_fall .main {
  position: relative;
  width: 100%;
  height: 100%;
}
.section_fall .main .box {
  /* float: left; */
  padding: 15px 0 0 15px;
  display: inline-block;
  vertical-align: text-top
}
.main .box .pic {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}
.main .box .pic img {
  width: 165px;
  vertical-align: top;
}
.main .box .pic span {
  display: block;
}
.main .box .pic p,
.main .box .pic span {
  width: 165px;
  text-align: center;
}
</style>